<template>
  <div class="search">
    <input type="text" 
      placeholder="音乐/视频/电台/用户" 
      v-model="key" 
      @keyup="keyup" 
      @click.stop="inputClick"/>
    <div class="search-result" v-if="searchRes && isCurrent">
      <div class="title">搜"{{key}}"相关&nbsp;&gt;</div>
      <table>
        <tr v-if="searchRes.result.songs">
          <td>
            <i></i>
            单曲
          </td>
          <td>
            <ul>
              <li v-for="song in searchRes.result.songs" :key="song.index" @click="toSong(song.id)">
                {{song.name}}-{{song.artists[0].name}}
              </li>
            </ul>
          </td>
        </tr>
        <tr v-if="searchRes.result.playlists">
          <td>
            <i></i>
            歌单
          </td>
          <td>
            <ul>
              <li v-for="list in searchRes.result.playlists" :key="list.index" @click="toPlaylist(list.id)">
                {{list.name}}
              </li>
            </ul>
          </td>
        </tr>
        <tr v-if="searchRes.result.artists">
          <td>
            <i></i>
            歌手
          </td>
          <td>
            <ul>
              <li v-for="art in searchRes.result.artists" :key="art.index">
                {{art.name}}
              </li>
            </ul>
          </td>
        </tr>
        <tr v-if="searchRes.result.albums">
          <td>
            <i></i>
            专辑
          </td>
          <td>
            <ul>
              <li v-for="alb in searchRes.result.albums" :key="alb.index">
                {{alb.name}}-{{alb.artist.name}}
              </li>
            </ul>
          </td>
        </tr>        
      </table>
    </div>
  </div>
</template>

<script>
import debounce from "@/common/debounce";
import { _search } from "@/network/search";
export default {
  data() {
    return {
      key: "",
      searchRes: null,
      isCurrent: true
    };
  },
  mounted() {
    // 给body添加点击关闭弹窗事件，再给input添加阻止冒泡，实现效果
    document.body.addEventListener('click',() => {
      this.isCurrent = false
    })
  },
  methods: {
    // 防抖获取搜索结果
    keyup: debounce(async function() {
      if (this.key === "") {
        this.searchRes = null
      }else{
        this.searchRes = await _search(this.key);
      }
    }, 300),
    inputClick() {
      this.isCurrent = true
    },
    // 前往歌曲详情
    toSong(id) {
      this.$router.push('/discover/song/detail?id=' + id)
    },
    // 前往歌单详情
    toPlaylist(id) {
      this.$router.push('/discover/playlist/detail?id=' + id)
    }
  }
};
</script>

<style scoped>
.search {
  display: flex;
  align-items: center;
  margin-left: 50px;
  position: relative;
}

input {
  display: block;
  width: 160px;
  height: 32px;
  border-radius: 16px;
  padding-left: 25px;
  font-size: 12px;
  /* color: #eee; */
  background: url("~@/assets/img/topbar.png") no-repeat -2px -98px;
  background-color: #fff;
}

.search-result {
  position: absolute;
  z-index: 10000;
  top: 60px;
  width: 240px;
  font-size: 12px;
  color: #666;
  background-color: #fff;
  box-shadow: 0 0 15px #000;
  border-radius: 5px;
}

.title {
  height: 30px;
  line-height: 30px;
  padding-left: 8px;
  border-bottom: 1px solid #ccc;
}

table {
  height: 30px;
  line-height: 30px;
  border-collapse: collapse;
}

table tr td:nth-child(1) {
  display: flex;
  align-items: center;
  width: 55px;
  text-align: center;
}

ul {
  border-left: 1px solid #ddd;
  color: #000;
}

li {
  padding-left: 8px;
  overflow: hidden;
  width: 184px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

li:hover {
  background-color: #ddd;
}

tr:nth-child(2n) td:nth-child(2n) {
  background-color: #f2f2f2;
}

tr i {
  background: url(~@/assets/img/icon.png) no-repeat -34px -300px;
  display: inline-block;
  width: 14px;
  height: 15px;
  margin: 0 5px;
}

tr:nth-child(2) i {
  background: url(~@/assets/img/icon.png) no-repeat -50px -300px;
}

tr:nth-child(3) i {
  background: url(~@/assets/img/icon.png) no-repeat -35px -320px;
}

tr:nth-child(4) i {
  background: url(~@/assets/img/icon.png) no-repeat -50px -320px;
}

tr:nth-child(1) td:nth-child(2) {
  border-top: none;
}

tr td:nth-child(2) {
  cursor: pointer;
  border-top: 1px solid #ddd;
}

.current {
  visibility: hidden;
}
</style>